import React from 'react';
import Input from '../base/Input.js';

const SearchInput = React.createClass({
  getInitialState() {
    return {
      searchData: ''
    };
  },
  handleSearch(target) {
    this.setState({ searchData: target.value });
    if (this.props.onSearch) {
      this.props.onSearch(target);
    }
  },
  render() {
    return (
      <div className={this.props.className ? 'search-group placeholder-normal ' + this.props.className : "search-group placeholder-normal"}>
        <Input
          data-target="search"
          type="text"
          value={this.state.searchData}
          onChange={this.handleSearch}
          onBlur={this.handleSearch}
          placeholder={this.props.placeholder}
        />
        <button className="btn"><img src="/static/dist-static/img/search.png" alt="d" /> </button>
      </div>
    );
  }
});

export default SearchInput;
